<template>
  <el-drawer :visible.sync="showDialog" direction="rtl" size="80%" :modal-append-to-body = "false"  :with-header="false"  :modal="false" >

    <div class="title">
      <span @click="showDialog = false">く {{dialogTitle}}</span>
      <span @click="showDialog = false" style="font-size: 24px;margin-right: 10px">×</span>
    </div>

    <div class="table-box">
      <left-table ref="leftTable"  @onload="onload"/>
      <div class="line"></div>
      <right-table  ref="rightTable" @onload="onload"/>
    </div>

  </el-drawer>
</template>

<script>
import ZlDialog from "@/components/zl-dialog/zl-dialog";
import LeftTable from "./left-table";
import RightTable from "./right-table";

export default {
  name: "user-table",
  components: {RightTable, LeftTable, ZlDialog},
  data() {
    return {
      dialogTitle:'人员信息',
      showDialog: false,
      userIds: "",
      cellInfo: { }
    };
  },


  methods: {

    open(cell,cabinetName) {
      this.cellInfo = cell
      this.dialogTitle = cabinetName+cell.cellNo;
      this.userIds = cell.userIds;
      this.showDialog = true;

      this.$nextTick(() => {
        this.$refs.leftTable.loadPage(cell.id,cell.userIds);
        this.$refs.rightTable.loadPage(cell.id,cell.userIds);
      });

    },

    onload(){
      this.$emit("onload")
      this.showDialog = false;
    },

  }

}
</script>

<style scoped lang="scss">

.title{
  padding: 10px;
  background-color: #8CAAE0;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  margin-bottom: 50px;
}

.table-box{
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  .line{
    background-color: #DFE8F7;
    width: 10px;
    margin: 0 10px;
    height: 800px;
  }
}



</style>
